<template>

    <!-- <div class="app" :style="contentArea" @lifecycle="lifecycle"> -->
    <div class="app" @lifecycle="lifecycle">

        <navbar class="page-navbar" :eeui="{backgroundColor:'#FFFFFF'}">
            <!-- <navbar-item type="left" @click="goBack()">
              <text class="chinahandfont iconl">&#xe69a;</text>
            </navbar-item> -->
            <navbar-item type="title">
                <text class="page-navbar-title">Schedule</text>
            </navbar-item>
            
        </navbar>
        <div class="page-content">
          <scroller class="scroller" show-scrollbar="false">
            <div class="schListWrp" v-for="itemX in scheduleList">
              <div class="dateWrp">
                <text class="dateTxt">{{itemX.date}}</text>
              </div>
              <div class="locWrp">
                <text class="locTxt">{{itemX.area}}</text>
              </div>
              <div class="itemListWrp">
                <div class="itemWrp" v-for="itemY of itemX.list" >
                  <div class="imgWrp">
                    <text class="chinahandfont imgType" v-if="itemY.arrange == 0 || itemY.arrange == 5">&#xe677;</text>
                    <text class="chinahandfont imgType" v-else-if="itemY.arrange == 1">&#xe67a;</text>
                    <text class="chinahandfont imgType" v-else-if="itemY.arrange == 2">&#xe66e;</text>
                    <text class="chinahandfont imgType" v-else-if="itemY.arrange == 3">&#xe675;</text>
                    <text class="chinahandfont imgType" v-else>&#xe678;</text>
                  </div>
                  <div class="infoWrp">
                    <text class="chinahandfont connFlag">&#xe69b;</text>
                    <div class="infoTxtWrp">
                      <div class="txtWrp">
                        <text class="txt1">{{itemY.name}}</text>
                      </div>
                      <div class="txtWrp">
                        <text class="txt2">{{itemY.details}}</text>
                      </div>
                      <div class="txtWrp" @click="goIntroduction(itemY)" >
                        <!-- {{itemY.introduce}} -->
                        <text class="txt3" v-if="itemY.arrange == 4">introduction</text>
                        <text class="txt3" v-else>{{itemY.introduce}}</text>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            </scroller>
        </div>
    </div>

</template>

<style scoped>

   
    .chinahandfont {
        font-family: chinahandfont;
    }

    .app {
      /* padding-bottom: 188px; */
        /* flex: 1; */
        
        /* background-color: #ffffff; */
        /* background-color: #e90101; */
    }

    .iconr {
        width: 66px;
        height: 66px;
        color: #000000;
        /* background-color: #000000; */
        margin-top: 26px;
    }

    .iconl {
      font-size: 31px;
      color: #222222;
      margin-left: 36px;
    }



    .page-content {
        width: 750px;
        flex:1;
        /* padding-top: 200px; */
        align-items: center;
        /* background-color: #efefef; */
    }

    .dateWrp {
        width: 750px;
        height: 64px;
        justify-content: center;
        align-items: center;
        background-color: #efefef;
    }

    .dateTxt {
      font-size: 24px;
      font-weight: bold;
      letter-spacing: 0.7px;
      color: #999999;
    }

    .locWrp {
      width: 750px;
      height: 64px;
      justify-content: center;
    }

    .locTxt {
      font-size: 24px;
      font-weight: bold;
      color: #222222;
      margin-left: 35px;
    }

    .itemListWrp {
      flex-direction: column;
      align-items: center;
      width: 750px;
    }

    .itemWrp {
      width: 678px;
      height: 200px;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }

    .imgWrp {
      width: 95px;
      height: 95px;
      background-color: #efefef;
      border-radius: 48px;
      justify-content: center;
      align-items: center;
    }

    .imgType {
      font-size: 72px;
      color: #c8331c;
    }

    .infoWrp {
      width: 550px;
      flex-direction: row;
      align-items: center;
      /* border-style: dashed;
      border-width: 1.5px;
      border-color: #c8331c; */
    }

    .connFlag {
      font-size: 20px;
      color: #c8331c;
      margin-right: 10px;
    }

    .infoTxtWrp {
      flex-direction: column;
      justify-content: center;
      width: 511px;
      height: 172px;
      padding-left: 33px;
      background-color: #ffffff;
      border-radius: 10px;
      border-style: dashed;
      border-width: 1.5px;
      border-color: #c8331c;
    }

    .txtWrp {
      width: 426px;
      flex-direction: row;
      align-items: center;
    }

    .txt1 {
      width: 426px;
      font-size: 24px;
      font-weight: bold;
      color: #222222;
      border-bottom-style: dashed;
      border-bottom-width: 1.5px;
      border-bottom-color: #dcdcdc;
    }

    .txt2 {
      font-size: 24px;
      font-weight: bold;
      color: #222222;
      margin-top: 15px;
    }

    .txt3 {
      font-size: 24px;
      font-weight: bold;
      color: #666666;
      margin-top: 15px;
    }

    .page-navbar {
        width: 750px;
        height: 90px;
        background-color: #ffffff;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: #d5d5d5;
    }

    .page-navbar-title {
        /* color: #ffffff; */
        font-size: 32px;
        font-weight: bold;
	      color: #222222;
    }

    
</style>
<script>
    import { WxcEpSlider } from 'weex-ui';
    const eeui = app.requireModule('eeui');
    const navigationBar = app.requireModule('navigationBar');

    export default {
        props: {
            statusBar: {
                type: [String, Number],
                default: 0
            },
            contentArea: {
              type: [String, Object],
              default: {height: "600px"}
            },
            contentHeight: {
              type: [String, Number],
              default: 1334
            },
        },
        components: { WxcEpSlider },
        data() {
            return {
                title: 'Hello, World!',
                desc: 'Hello, World!  Hello, EEUI! ',
                sliderId: 1,
                cardLength: 5,
                cardSize: {
                  width: 579,
                  height: 264,
                  spacing: 0,
                  scale: 0.8
                },
                lists: [],
                scrollHeight: 800,
                scheduleList: [],
            }
        },
        created () {
          this.reqList();
        },
        mounted() {
          // navigationBar.setLeftItem({
          //   icon: 'tb-back-light',
          //   iconColor: '#222222',
          //     title: '按钮1',
          // }, function(result) {
          //     //....
          // });
          this.scrollHeight = this.contentHeight - 683;
        },

        // beforeCreate: function () {
        //     const domModule = app.requireModule('dom')
        //     domModule.addRule('fontFace', {
        //         'fontFamily': "chinahandfont",
        //         'src': "url('http://at.alicdn.com/t/font_1364538_cin699809qv.ttf')"
        //         // 'src': "url('local://eeui/pages/iconfont/chinahandfont.ttf')"
        //     });
        // },

        methods: {
            /**
             * 生命周期
             * @param res
             */
            lifecycle(res) {
                switch (res.status) {
                    case "ready":
                        //页面挂载(初始化)
                        break;

                    case "resume":
                        //页面激活(恢复)
                        break;

                    case "pause":
                        //页面失活(暂停)
                        break;
                }
            },

            /**
             * 打开新页面
             * @param jsPageName    (String)JS页面名称
             * @param params        (Object)传递参数
             */
            goForward(jsPageName, params) {
                eeui.openPage({
                    url: str + ".js",
                    pageType: "app",
                    statusBarColor: "#3EB4FF",
                    params: params ? params : {}
                });
            },

            /**
             * 返回上一页(关闭当前页)
             */
            goBack() {
                eeui.closePage();
            },
            viewCode(str) {
                this.openViewCode(str);
            },
            goLogin() {
              eeui.openPage({
                pageName: 'Login',
                pageType: 'app',
                url: 'login.js'
              }, function(result) {
                  //......
              });

            },
            goIntroduction(item) {
              console.log("--------------------------- : "  + item.introduce);
              if(item.arrange == 4) {

                  eeui.openPage({
                    pageName: 'Introduction',
                    pageType: 'app',
                    statusBarStyle: false,
                    url: 'detail/index.js',
                    params: {
                      uid: item.introduce
                    }
                  }, function(result) {
                      //......
                  });
              }

            },
            reqList() {
              let vm = this;
              eeui.ajax({
                  method: 'post',
                  url: 'http://ds.paysys.cn/tourismApi/api/tourismcontroller/getPlanList',
                  // headers: {
                  //     token: 'x2eefhjb2h3rj'
                  // },
                  dataType: 'json',
                  data: {
                      tripId: 1
                  },
                  // files: {
                  //     userimg: '/storage/sdcard/.....'
                  // }
              }, function(result) {
                  //......
                  // console.log(" :::::::::::::::::::::::::: "  + JSON.stringify(result));
                  if (result.status === 'success') {
                    if(result.result.retCode == 1)
                    // console.log(" -------------tttt--------------- "  + JSON.stringify(result.result.data));
                    vm.scheduleList = result.result.data;
                  }
              });
            }
            
        }
    }
</script>
